<template>
    <u-navbar autoBack placeholder height="44px">
        <template #left>
            <text style="font-size: 37rpx;">
                消息
            </text>

        </template>
    </u-navbar>
    <view class="sysMsg" @click="handleNavigateTo('../../pagesC/systemMsg/index')">
        <view class="sysMsg-L">
            <view class="sysMsgIcon">
                <u-icon name="bell" :size="25" color="#fff"></u-icon>
            </view>
            <text>系统消息</text>
        </view>
        <u-icon name="arrow-right" :size="14" color="#B1B1B1"></u-icon>
    </view>
    <view class="msgList">
        <u-swipe-action>
            <u-swipe-action-item :options="swipeOptions" v-for="( item, index) in msgList" :key="index">
                <view class="item" @click="handleNavigateTo('../../pagesC/chat/index')">
                    <up-image class="upImage" :src="item.avatar" width="100rpx" height="100rpx" radius="50"></up-image>
                    <view class="group">
                        <view class="info">
                            <text class="name">{{ item.name }}</text>
                            <text class="msgDate">{{ item.msgDate }}</text>
                        </view>
                        <view class="info">
                            <text class="msgText">{{ item.msgText }}</text>
                            <up-badge numberType="overflow" max="99" bgColor="#EA5B45" :value="item.msgNum"></up-badge>
                        </view>
                    </view>
                </view>
            </u-swipe-action-item>
        </u-swipe-action>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { handleNavigateTo } from '@/plugins/uniApp';


/* 信息栏的数组数据 */
const msgList = ([
    { name: "张文婷", msgText: '是的', msgNum: 0, msgDate: '23/03/10', avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { name: "张文婷", msgText: '是的', msgNum: 2, msgDate: '23/03/10', avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { name: "张文婷", msgText: '是的', msgNum: 3, msgDate: '23/03/10', avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { name: "张文婷", msgText: '是的', msgNum: 4, msgDate: '23/03/10', avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" }
])
const swipeOptions = ref([
    { text: '置顶', style: { backgroundColor: '#976AFF'} },
    { text: '删除',  style: {  backgroundColor: '#EA5C45' } }
])
</script>

<style lang="scss" scoped>
.sysMsg {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-bottom: 20rpx;

    .sysMsg-L {
        display: flex;
        flex-direction: row;
        align-items: center;

        .sysMsgIcon {
            background-color: #FA929D;
            border-radius: 50rpx;
            padding: 20rpx;
            margin-right: 30rpx;
        }

        text {
            font-size: 37rpx;
        }

    }
}

.msgList {
    display: flex;
    flex-direction: column;


    .item {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding:20rpx;

        .group {
            display: flex;
            flex-grow: 1;
            flex-direction: column;

        }
    }
}

.info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 30rpx;
    margin-right: 40rpx;

    .name {
        font-size: 36rpx;
    }

    .msgDate {
        color: #B1B1B1;
        font-size: 30rpx;
    }

    .msgText {
        color: #707070;
        font-size: 32rpx;

    }
}
</style>